Skip to content

fix(ui5-select): align value state message header with design spec#13766

Merged
NakataCode merged 2 commits into
mainfrom
select-semantic-message-header-shadow
Jul 6, 2026
Merged

fix(ui5-select): align value state message header with design spec#13766
NakataCode merged 2 commits into
mainfrom
select-semantic-message-header-shadow

Conversation

@NakataCode

@NakataCode NakataCode commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

The value state message header in the Select dropdown had a colored inset box-shadow acting as a
bottom border (e.g. red for error, orange for warning). This did not match the Horizon
Visual Design specification.

Changes in SelectPopover.css:

  • Remove the per-state inset box-shadow (bottom border) from all four value states (error,
    warning, success, information) scoped to .ui5-select-popover
  • Add sapContent_HeaderShadow to the value state message header to visually separate it from the
    options list below.

JIRA: BGSOFUIPIRIN-7061
Related to: #13308

@NakataCode NakataCode temporarily deployed to netlify-preview July 1, 2026 11:17 — with GitHub Actions Inactive
@NakataCode NakataCode temporarily deployed to netlify-preview July 1, 2026 11:18 — with GitHub Actions Inactive
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

@yanaminkova yanaminkova requested a review from kgogov July 6, 2026 07:34

@kgogov kgogov left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The box-shadow: none reset is necessary — ValueStateMessage.css sets per-state colored inset shadows via CSS custom properties that were leaking into the Select's [ui5-popover] context unintentionally. The reset correctly cancels them before applying sapContent_HeaderShadow. Verified in browser across all four value states. LGTM.

@NakataCode NakataCode merged commit 173d3fc into main Jul 6, 2026
20 of 21 checks passed
@NakataCode NakataCode deleted the select-semantic-message-header-shadow branch July 6, 2026 11:44
@NakataCode NakataCode temporarily deployed to netlify-preview July 6, 2026 11:45 — with GitHub Actions Inactive
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🧹 Preview deployment cleaned up: https://pr-13766--ui5-webcomponents.netlify.app

@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🎉 This PR is included in version v2.24.0 🎉

The release is available on v2.24.0

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants